<template>

	<view>
		<view>
			<u-loading-page :loading="load" bg-color="#e5e5e5" loading-mode="semicircle" loading-text="加载中......">
			</u-loading-page>
		</view>
		<view class="content" @touchstart="hideDrawer">
			<scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation"
				:scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory"
				upper-threshold="50">
				<!-- 加载历史数据waitingUI -->
				<!-- 	<view class="loading">
					<view class="spinner">
						<view class="rect1"></view>
						<view class="rect2"></view>
						<view class="rect3"></view>
						<view class="rect4"></view>
						<view class="rect5"></view>
					</view>
				</view> -->
				<view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.msg.time">
					<!-- 系统消息 -->
					<block v-if="row.type=='system'">
						<view class="system">
							<!-- 文字消息 -->
							<view v-if="row.msg.type=='text'" class="text">
								{{row.msg.content.text}}
							</view>
							<!-- 领取红包消息 -->
							<view v-if="row.msg.type=='redEnvelope'" class="red-envelope">
								<image src="/static/HM/img/red-envelope-chat.png"></image>
								{{row.msg.content.text}}
							</view>
						</view>
					</block>
					<!-- 用户消息 -->
					<block v-if="row.type=='user'">
						<!-- 自己发出的消息 -->
						<view class="my" v-if="row.msg.userinfo.uid==myuid">
							<!-- 左-消息 -->
							<view class="left">
								<!-- 文字消息 -->
								<view v-if="row.msg.type=='text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<!-- 语言消息 -->
								<view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)"
									:class="playMsgid == row.msg.time?'play':''">
									<view class="length">{{row.msg.content.length}}</view>
									<view class="icon my-voice"></view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.msg.type=='image'" class="bubble img" @tap="showPic(row.msg)">
									<image
										:src="row.msg.content.url==null?imgApi+row.msg.content.text:row.msg.content.url"
										:style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}">
									</image>
								</view>
								<!-- 红包 -->
								<view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope"
									@tap="openRedEnvelope(row.msg,index)">
									<image src="https://www.tdtye.com/files/vegetable_mall_file/images/redBackgroup.png"
										style="width: 200rpx;"></image>
									<view class="tis">
										<!-- 点击开红包 -->
									</view>
									<view class="blessing" style="color: #ffe4be;">
										发出的红包
									</view>
								</view>

							</view>
							<!-- 右-头像 -->
							<view class="right">
								<image :src="row.msg.userinfo.face"></image>
							</view>
						</view>
						<!-- 别人发出的消息 -->
						<view class="other" v-if="row.msg.userinfo.uid!=myuid">
							<!-- 左-头像 -->
							<view class="left">
								<image :src="imgApi+row.msg.userinfo.face"></image>
							</view>
							<!-- 右-用户名称-时间-消息 -->
							<view class="right">
								<view class="username">
									<view class="name">{{row.msg.userinfo.username}}</view>
									<view class="time">{{row.msg.time}}</view>
								</view>
								<!-- 文字消息 -->
								<view v-if="row.msg.type=='text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<!-- 语音消息 -->
								<view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)"
									:class="playMsgid == row.msg.time?'play':''">
									<view class="icon other-voice"></view>
									<view class="length">{{row.msg.content.length}}</view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.msg.type=='image'" class="bubble img" @tap="showPic(row.msg)">
									<image
										:src="row.msg.content.url==null?imgApi+row.msg.content.text:row.msg.content.url"
										:style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}">
									</image>
								</view>
								<!-- 红包 -->
								<view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope"
									@tap="openRedEnvelope(row.msg,index)">
									<image src="https://www.tdtye.com/files/vegetable_mall_file/images/redBackgroup.png"
										style="width: 200rpx;"></image>
									<view class="tis">
										<!-- 点击开红包 -->
									</view>
									<view class="blessing">
										{{row.msg.content.blessing}}
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 抽屉栏 -->
		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 -->
			<!-- <swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src="'/static/HM/img/emoji/'+em.url"></image>
					</view>
				</swiper-item>
			</swiper> -->
			<!-- 更多功能 相册-拍照-红包 -->
			<view class="more-layer" :class="{hidden:hideMore}">
				<view class="list">
					<view class="box" @tap="chooseImage">
						<view class="icon tupian2"></view>
						<view>相册</view>
					</view>

					<view class="box" @tap="camera">
						<view class="icon paizhao"></view>
						<view>拍照</view>
					</view>
					<view class="box" @tap="handRedEnvelopes">
						<view class="icon hongbao"></view>
						<view>红包</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
			<view class="voice">
				<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="textbox">
				<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
					@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
					@touchcancel="voiceCancel">{{voiceTis}}</view>
				<view class="text-mode" :class="isVoice?'hidden':''">
					<view class="box">
						<textarea auto-height="true" v-model="textMsg" @focus="textareaFocus" />
					</view>
					<!-- <view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"></view>
					</view> -->
				</view>
			</view>
			<!-- #ifndef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="send" :class="isVoice?'hidden':''" @click="sendText">
				<view class="btn">发送</view>
			</view>
		</view>
		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
		<!-- 红包弹窗 -->
		<view class="windows" :class="windowsState">
			<!-- 遮罩层 -->
			<view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
			<view class="layer" @touchmove.stop.prevent="discard">
				<view class="open-redenvelope">
					<view class="top">
						<view class="close-btn">
							<view class="icon close" @tap="closeRedEnvelope"></view>
						</view>
						<image :src="redenvelopeData.face"></image>
					</view>
					<view class="from">来自{{redenvelopeData.from}}</view>
					<view class="blessing">{{redenvelopeData.blessing}}</view>
					<view class="money">{{redenvelopeData.money}}元</view>
					<view style="color: #f7dddd;display: flex;font-size: 33rpx;">
						<view style="margin: auto;">
							{{getRedBagStatus()}}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	import {
		pathToBase64
	} from '../../js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				load: true,
				//错误重连次数
				errorSocket: 0,
				myTitle: "",
				sendTitle: "",
				sendAvatar: "",
				myAvatar: "",
				api: "",
				imgApi: "",
				webSocketUrl: "websocket/",
				//文字消息
				textMsg: '',
				//消息列表
				isHistoryLoading: false,
				scrollAnimation: false,
				scrollTop: 0,
				scrollToView: '',
				msgList: [],
				msgImgList: [],
				myuid: 0,
				sendId: 0,
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				isVoice: false,
				voiceTis: '按住 说话',
				recordTis: "手指上滑 取消发送",
				recording: false,
				willStop: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				recordTimer: null,
				recordLength: 0,

				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,
				// 抽屉参数
				popupLayerClass: '',
				// more参数
				hideMore: true,
				//表情定义
				hideEmoji: true,
				//红包相关参数
				windowsState: '',
				redenvelopeData: {
					rid: null, //红包ID
					from: null,
					face: null,
					blessing: null,
					money: null
				},
				// Socket连接状态
				IsOpen: false,
				// SocketTask
				SocketTask: false,
				// 是否上线
				IsOnline: false,
			};
		},
		onLoad(e) {
			console.log("e", e)
			this.imgApi = this.$reqConfig.URLIMAGE
			this.myuid = e.id;
			this.sendId = e.sendid
			this.title = e.title
			//设置聊天标题为商家名称
			uni.setNavigationBarTitle({
				title: this.title
			})
			this.api = this.$reqConfig.WS
			if (e.avatar) {
				this.sendAvatar = e.avatar
				this.myAvatar = uni.getStorageSync("avatarUrl")
				this.sendTitle = e.title
			}
			//获取聊天记录
			this.getMsgList();
			console.log("myuid", this.myuid)
			//语音自然播放结束
			this.AUDIO.onEnded((res) => {
				this.playMsgid = null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				this.recordEnd(e);
			})
			// #endif
			this.openSocket()
			console.log("连接后", e)
		},
		onHide() {
			console.log("页面隐藏了")

		},
		onUnload() {
			console.log("页面卸载")
			this.IsOnline = false
			uni.closeSocket();
		},
		onShow() {
			console.log("再次进入页面，判断是否需要重连");
			this.openSocket();
			this.scrollTop = 99999;

		},
		methods: {
			openSocket() {
				console.log("test")
				// 防止重复连接
				if (this.IsOpen) return
				let token = uni.getStorageSync("token")
				let url = this.api + this.webSocketUrl + token + "/" + this.sendId
				console.log('url', url)
				// 连接
				this.SocketTask = uni.connectSocket({
					url: url,

					fail(e) {
						console.log("连接失败")
					},
					success() {
						console.log("连接成功")
					},
					complete: () => {}
				});
				console.log('socket', this.SocketTask)
				if (!this.SocketTask) return;
				// 监听开启
				this.SocketTask.onOpen(() => {
					// 将连接状态设为已连接
					console.log('将连接状态设为已连接');
					this.errorSocket = 0
					this.IsOpen = true
					this.IsOnline = true
				})
				// 监听关闭
				this.SocketTask.onClose(() => {
					this.IsOpen = false;
					if (!this.IsOnline) {
						uni.closeSocket();
					} else {
						//非主动关闭，尝试重连
						console.log('socket重连中....');
						//判断重连次数是否大于3
						if (this.errorSocket >= 3) {
							uni.showToast({
								title: "服务器连接失败，请返回上个页面重试",
								duration: 3000,
								icon: none
							})
							console.log('socket重连达到上限');
							uni.closeSocket();
							this.IsOnline = false
						} else {
							this.openSocket();
							this.errorSocket++;
						}
					}
				})
				// 监听错误
				this.SocketTask.onError(() => {
					console.log('连接错误');
					this.IsOpen = false;
					if (!this.IsOnline) {
						console.log('连接已关闭');
						uni.closeSocket();
					} else {
						//如果不是主动关闭的，那么进行重连
						console.log('socket重连中....');
						//判断重连次数是否大于3
						if (this.errorSocket >= 3) {
							uni.showToast({
								title: "服务器连接失败，请返回上个页面重试",
								duration: 3000,
								icon: none
							})
							console.log('socket重连达到上限');
							uni.closeSocket();
							this.IsOnline = false
						} else {
							this.openSocket();
							this.errorSocket++;
						}
					}
				})
				// 监听接收信息
				this.SocketTask.onMessage((e) => {
					this.getMessageSend(e)
				})
			},

			//获取服务端消息并渲染到页面上
			getMessageSend(e) {
				let a = JSON.parse(e.data)
				console.log('接收消息1', a);
				var nowDate = new Date();
				let data;
				if (a.msgType == "image") {
					data = {
						url: this.imgApi + a.content,
						w: a.w,
						h: a.h
					};
				} else if (a.msgType == 'text') {
					let content = this.replaceEmoji(a.content);
					data = {
						text: content
					}
				} else if (a.msgType == 'voice') {
					data = {
						text: this.imgApi + a.content,
						length: a.length
					}
				} else if (a.msgType == 'redEnvelope') {
					data = {
						rid: a.rid,
						blessing: a.content
					}
				}
				let msg = {
					type: 'user',
					msg: {
						time: nowDate.getHours() + ":" + nowDate.getMinutes() + ":" + nowDate
							.getSeconds(),
						type: a.msgType,
						userinfo: {
							uid: this.sendId,
							username: this.sendTitle,
							face: this.sendAvatar
						},
						content: data
					}
				}
				this.screenMsg(msg);
			},
			// 接受消息(筛选处理)
			screenMsg(msg) {
				//从长连接处转发给这个方法，进行筛选处理
				if (msg.type == 'system') {
					// 系统消息
					switch (msg.msg.type) {
						case 'text':
							this.addSystemTextMsg(msg);
							break;
						case 'redEnvelope':
							this.addSystemRedEnvelopeMsg(msg);
							break;
					}
				} else if (msg.type == 'user') {
					// 用户消息
					switch (msg.msg.type) {
						case 'text':
							this.addTextMsg(msg);
							break;
						case 'voice':
							this.addVoiceMsg(msg);
							break;
						case 'image':
							this.addImgMsg(msg);
							break;
						case 'redEnvelope':
							this.addRedEnvelopeMsg(msg);
							break;
					}
					console.log('用户消息123');
					//非自己的消息震动
					if (msg.msg.userinfo.uid != this.myuid) {
						console.log('振动');
						uni.vibrateLong();
					}
				}
				this.$nextTick(function() {
					// 滚动到底
					console.log('滚动的msg', msg.msg.time)
					this.scrollToView = 'msg' + msg.msg.time
				});
			},

			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e) {
				// if (this.isHistoryLoading) {
				// 	return;
				// }
				// this.isHistoryLoading = true; //参数作为进入请求标识，防止重复请求
				// this.scrollAnimation = false; //关闭滑动动画
				// let Viewid = this.msgList[0].msg.id; //记住第一个信息ID
				// //本地模拟请求历史记录效果
				// setTimeout(() => {
				// 	// 消息列表			
				// 	// 获取消息中的图片,并处理显示尺寸
				// 	for (let i = 0; i < list.length; i++) {
				// 		if (list[i].type == 'user' && list[i].msg.type == "img") {
				// 			list[i].msg.content = this.setPicSize(list[i].msg.content);
				// 			this.msgImgList.unshift(list[i].msg.content.url);
				// 		}
				// 		list[i].msg.id = Math.floor(Math.random() * 1000 + 1);
				// 		// this.msgList.unshift(list[i]);
				// 	}

				// 	//这段代码很重要，不然每次加载历史数据都会跳到顶部
				// 	this.$nextTick(function() {
				// 		this.scrollToView = 'msg' + Viewid; //跳转上次的第一行信息位置
				// 		this.$nextTick(function() {
				// 			this.scrollAnimation = true; //恢复滚动动画
				// 		});

				// 	});
				// 	this.isHistoryLoading = false;

				// }, 1000)
			},
			// 加载初始页面消息
			getMsgList() {
				console.log('send', this.sendId)
				this.$axios({
					url: 'user/sysChat/getMsgList',
					method: "post",
					data: {
						merchantId: this.sendId
					}
				}).then((res) => {
					if (res.result.length != 0) {
						this.list = res.result
						// 获取消息中的图片,并处理显示尺寸
						console.log('list', this.list)
						for (let i = 0; i < this.list.length; i++) {
							if (this.list[i].type == 'user' && this.list[i].msg.type == "image") {
								this.list[i].msg.content = this.setPicSize(this.list[i].msg.content);
								this.msgImgList.push(this.imgApi + this.list[i].msg.content.text);
							}
							if (this.list[i].msg.sendType == "user") {
								this.myAvatar = this.list[i].msg.userinfo.face
								this.myTitle = this.list[i].msg.userinfo.username
							} else {
								this.sendAvatar = this.list[i].msg.userinfo.face
								this.sendTitle = this.list[i].msg.userinfo.username
							}
						}
						this.msgList = this.list;
						console.log('msgList', this.msgList)
					}
					this.load = false
					// 滚动到底部
					this.scrollTop = -1
					this.$nextTick(() => {
						this.scrollTop = 99999999999
						this.scrollAnimation = true;
					})
				})
			},
			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize(content) {
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
				let maxH = uni.upx2px(350); //350是定义消息图片最大高度
				if (content.w > maxW || content.h > maxH) {
					let scale = content.w / content.h;
					content.w = scale > 1 ? maxW : maxH * scale;
					content.h = scale > 1 ? maxW / scale : maxH;
				}
				return content;
			},

			//更多功能(点击+弹出) 
			showMore() {
				this.isVoice = false;
				this.hideEmoji = true;
				if (this.hideMore) {
					this.hideMore = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			// 打开抽屉
			openDrawer() {
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer() {
				this.popupLayerClass = '';
				setTimeout(() => {
					this.hideMore = true;
					this.hideEmoji = true;
				}, 150);
			},
			// 选择图片发送
			chooseImage() {
				this.getImage('album');
			},
			//拍照发送
			camera() {
				this.getImage('camera');
			},
			//发红包
			handRedEnvelopes() {
				uni.navigateTo({
					url: 'HM-hand/HM-hand?id=' + this.sendId
				});
				this.hideDrawer();
			},
			//选照片 or 拍照
			getImage(type) {
				console.log("照片", type)
				this.hideDrawer();
				uni.chooseImage({
					sourceType: [type],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							if (res.tempFilePaths[i].size >= 5242880) {
								console.log("图片超出大小限制")
								continue;
							}
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image) => {
									console.log('image', image)
									let msg = {
										url: res.tempFilePaths[i],
										w: image.width,
										h: image.height
									};
									//转base64存到图片数组中
									pathToBase64(image.path).then(base64 => {
										let data = {
											type: 'image',
											text: base64,
											w: image.width,
											h: image.height
										}
										data = JSON.stringify(data);
										console.log('data', data)
										uni.sendSocketMessage({
											data: data,
											success: (res) => {
												console.log('结果', res)
											}
										});
									})
									this.sendMsg(msg, 'image');
								}
							});
						}

					},
				});
			},
			// 选择表情
			chooseEmoji() {
				this.hideMore = true;
				if (this.hideEmoji) {
					this.hideEmoji = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			//添加表情
			addEmoji(em) {
				this.textMsg += em.alt;
			},

			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus() {
				if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
					this.hideDrawer();
				}
			},
			// 发送文字消息			
			sendText() {
				console.log("进入消息")
				this.hideDrawer(); //隐藏抽屉
				if (!this.textMsg) {
					return;
				}
				let content = this.replaceEmoji(this.textMsg);
				let msg = {
					text: content,
					type: 'text'
				}
				this.sendMsg(msg, 'text');

				console.log("textMsg", this.textMsg)
				console.log("msg", msg.text)
				msg = JSON.stringify(msg);
				let data = {
					text: this.textMsg,
					type: 'text'
				}
				data = JSON.stringify(data);
				uni.sendSocketMessage({
					data: data,
					complete: (res) => {
						console.log('调用完毕', res)
					}
				});
				this.textMsg = ''; //清空输入框

			},
			//替换表情符号为图片
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					console.log("item: " + item);
					// for (let i = 0; i < this.emojiList.length; i++) {
					// 	let row = this.emojiList[i];
					// 	for (let j = 0; j < row.length; j++) {
					// 		let EM = row[j];
					// 		if (EM.alt == item) {
					// 			//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
					// 			//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
					// 			let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
					// 			let imgstr = '<img src="' + onlinePath + this.onlineEmoji[EM.url] + '">';
					// 			console.log("imgstr: " + imgstr);
					// 			return imgstr;
					// 		}
					// 	}
					// }
				});
				return '<div style="display: flex;align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';
			},

			// 发送消息
			sendMsg(content, type) {
				var nowDate = new Date();
				let msg = {
					type: 'user',
					msg: {
						// id: lastid,
						time: nowDate.getHours() + ":" + nowDate.getMinutes() + ":" + nowDate.getSeconds(),
						type: type,
						userinfo: {
							uid: this.myuid,
							username: this.title,
							face: this.myAvatar
						},
						content: content
					}
				}
				console.log('msg', msg)
				this.screenMsg(msg);
			},

			// 添加文字消息到列表
			addTextMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加语音消息到列表
			addVoiceMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加图片消息到列表
			addImgMsg(msg) {
				msg.msg.content = this.setPicSize(msg.msg.content);
				this.msgImgList.push(msg.msg.content.url);
				this.msgList.push(msg);
				console.log('接收到图片')
			},
			addRedEnvelopeMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加系统文字消息到列表
			addSystemTextMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加系统红包消息到列表
			addSystemRedEnvelopeMsg(msg) {
				this.msgList.push(msg);
			},
			//发红包
			sendRedEnvelopeData(e) {
				console.log('接收到消息', e)
				// 给服务端推送消息							
				let data = {
					rid: e.rid,
					text: e.blessing,
					type: 'redEnvelope'
				}
				data = JSON.stringify(data);
				uni.sendSocketMessage({
					data: data,
					complete: (res) => {
						console.log('调用完毕', res)
					}
				});
				let msg = {
					blessing: e.blessing,
					rid: e.rid
				}
				this.sendMsg(msg, 'redEnvelope');
			},
			// 打开红包
			openRedEnvelope(msg, index) {
				let rid = msg.content.rid;
				uni.showLoading({
					title: '加载中...'
				});
				console.log("rid" + rid);
				//模拟请求服务器效果
				this.$axios({
					url: 'system/sysRedEnvelope/detail',
					method: "post",
					data: {
						rid: rid
					}
				}).then((res) => {
					console.log("res", res)
					let redBag = res.result
					this.redenvelopeData = {
						rid: redBag.rid,
						from: redBag.from,
						face: redBag.face,
						blessing: redBag.blessing,
						money: redBag.money,
						status: redBag.status,
						sendType: redBag.type
					}
					if (redBag.face.indexOf("files") != -1) {
						this.redenvelopeData.face = this.imgApi + this.redenvelopeData.face;
					}
					uni.hideLoading();
					this.windowsState = 'show';
				})
			},
			getRedBagStatus() {
				if (this.redenvelopeData.sendType == 0) {
					//商家发的红包
					switch (this.redenvelopeData.status) {
						case 0:
							return "未领取"
						case 1:
							return "已领取"
						case -1:
							return "已退回"
					}
				} else {
					//用户发的红包
					switch (this.redenvelopeData.status) {
						case 0:
							return "对方还未领取"
						case 1:
							return "对方已领取"
						case -1:
							return "已退回"
					}
				}
			},
			// 关闭红包弹窗
			closeRedEnvelope() {
				this.windowsState = 'hide';
				setTimeout(() => {
					this.windowsState = '';
				}, 200)
			},
			sendSystemMsg(content, type) {
				let lastid = this.msgList[this.msgList.length - 1].msg.id;
				lastid++;
				let row = {
					type: "system",
					msg: {
						id: lastid,
						type: type,
						content: content
					}
				};
				this.screenMsg(row)
			},
			//领取详情
			toDetails(rid) {
				uni.navigateTo({
					url: 'HM-details/HM-details?rid=' + rid
				})
			},
			// 预览图片
			showPic(msg) {
				let wxurl = msg.content.url == null ? this.imgApi + msg.content.text : msg.content.url
				uni.previewImage({
					indicator: "none",
					current: wxurl,
					urls: this.msgImgList
				});
			},
			// 播放语音
			playVoice(msg) {
				this.playMsgid = msg.time;
				this.AUDIO.src = msg.content.text;
				if (msg.content.text.indexOf(this.imgApi) == -1) {
					this.AUDIO.src = this.imgApi + msg.content.text;
				}
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			// 录音开始
			voiceBegin(e) {
				console.log("开始录音")
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({
					format: "mp3"
				}); //录音开始,
			},
			//录音开始UI效果
			recordBegin(e) {
				this.recording = true;
				this.voiceTis = '松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000)
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e) {
				console.log("录音结束")
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop(); //录音结束
			},
			//录音结束(回调文件)
			recordEnd(e) {
				if (!this.willStop) {

					let msg = {
						length: 0,
						url: e.tempFilePath
					}
					let min = parseInt(this.recordLength / 60);
					let sec = this.recordLength % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					msg.length = min + ':' + sec;

					//先将语音上传到服务端然后返回路径
					uni.uploadFile({
						url: this.$reqConfig.UPLOADAPI + '/system/public/uploadFile',
						filePath: e.tempFilePath,
						name: 'audio',
						formData: {
							'user': 'test'
						},
						success: (uploadFileRes) => {
							console.log('回调', uploadFileRes.data);

							let data = {
								type: 'voice',
								text: JSON.parse(uploadFileRes.data).result,
								length: msg.length
							}
							data = JSON.stringify(data);
							console.log('data', data)
							uni.sendSocketMessage({
								data: data,
								success: (res) => {
									console.log('结果', res)
								},
								complete: (res) => {
									console.log('执行完毕', res)
								}
							});
						}
					});

					this.sendMsg(msg, 'voice');
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			//BlobUrl转blob数据
			objectURLToBlob(blodurl) {
				return new Promise((resolve, reject) => {
					var http = new XMLHttpRequest();
					http.open('GET', blodurl, true);
					http.responseType = 'blob';
					http.onload = function(e) {
						if (this.status == 200 || this.status === 0) {
							// console.log('blod数据',this.response);
							// 在将blod数据转为file
							let files = new window.File([this.response], 'file.name', {
								type: 'image'
							});
							// console.log('blod数据转换file',files);
							resolve(files);

						}
					};
					http.send();
				});
			},
			// 切换语音/文字输入
			switchVoice() {
				this.hideDrawer();
				this.isVoice = this.isVoice ? false : true;
			},
			discard() {
				return;
			}
		}
	}
</script>
<style lang="scss">
	@import "../../pageA/static/HM/HM-chat/css/style.scss";

	uni-page-wrapper {
		height: auto !important;
	}
</style>
